<template>
  <div class="home_m">
    <main class="m_product" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <!-- <section class="product_box">
                    <div class="product_top">
                        <a href="#" class="product_left">
                             <img src="../assets/images/jd_skill.png" alt="" class="miaosha_icon">
                            <strong class="dianshu">六点场</strong>
                            <span class="time">00:21:43</span>
                        </a>
                    </div>
                    <div class="product_content">
                        <ul>
                        
                            <li class="product_skill_item" v-for="item in homeDatas">
                                <router-link :to="'/detail/'+item.id" class="product_skill_item_link">
                                    <img v-lazy="item.picUrl" alt="" class="product_skill_item_cion lazy-img-fadein">
                                    <p class="nowprice">
                                        <i style="text-decoration: none;font-style: normal;font-size: 12px">¥</i>
                                        <span class="now_price">{{item.retailPrice}}</span>
                                    </p>
                                    <p class="oldprice">
                                        <i style="text-decoration: none;font-style: normal;font-size: 12px">¥</i>
                                        <del class="old_price">{{item.retailPrice}}</del>
                                    </p>
                                </router-link>
                            </li>
                        
                        </ul>
                    </div>
                </section> -->
      <div class="left_share_quality_content clearfix">
        <div class="share_quality">
          <!-- <div class="share_quality_top">
                        <div class="share_title">
                            <p class="share_text">为你推荐</p>
                        </div>
                    </div> -->
          <div class="share_quality_left not_eng_box">
            <ul>
              <li class="its" v-for="( item,index ) in mainDatas" :key="index">
                <router-link class="not_eng_link" :to="'/detail/'+item.id">
                  <img v-lazy="item.picUrl" alt="">
                  <div class="not_eng_info">
                    <p class="not_eng_title">{{item.name}}</p>
                    <p class="not_eng_text">
                      <i style="text-decoration: none;font-style: normal;font-size: 12px">¥</i>
                      <span class="more_info_price_txt">{{item.retailPrice}}</span>
                    </p>
                  </div>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<script>
import { InfiniteScroll, Toast, MessageBox } from 'mint-ui'
export default {
  components: {
    InfiniteScroll,
    Toast
  },
  data() {
    return {
      homeDatas: [],
      mainDatas: [],
      count: 0,
      limit: 20,
      loading: true
    }
  },
  mounted() {
    this.getData(), this.getOpenId()
  },
  methods: {
    getData() {
      let _this = this
      _this.$http.get('/mechanismadmin/mobile/goods').then(
        res => {
          _this.mainDatas = res.data.data.hotGoods
          _this.count = res.data.data.count
          _this.loading = false
        },
        err => {
          console.log(err)
        }
      )
    },
    getOpenId() {
      let code = this.$route.query.code
      let _this = this
      let openid = window.sessionStorage.openid
      console.log(openid)
      if (openid == null || openid == '') {
        _this.$http
          .get('/mechanismadmin/mobile/addUserOpen', {
            params: {
              code: code
            }
          })
          .then(
            res => {
              let openid = res.data.data.openid
              let userInfo = res.data.data.userinfo

              if (userInfo != '') {
                window.sessionStorage.userInfo = JSON.stringify(userInfo)
              }
              window.sessionStorage.openid = openid
            },
            err => {
              console.log(err)
            }
          )
      }
    },
    loadMore() {
      setTimeout(() => {
        let _this = this
        if (this.limit < this.count) {
          _this.loading = true
          this.limit = this.limit + 20
          _this.$http
            .get('/mechanismadmin/mobile/goods', {
              params: {
                limit: _this.limit
              }
            })
            .then(
              res => {
                _this.mainDatas = res.data.data.hotGoods
                _this.count = res.data.data.count
                _this.loading = false
              },
              err => {
                console.log(err)
              }
            )
        } else {
          _this.loading = true
          Toast({
            message: '没有更多商品了',
            position: 'middle',
            duration: 1000
          })
        }
      }, 0)
    }
  }
}
</script>
<style>
img[lazy='error'] {
  background: url('../assets/images/err.png');
}
.not_eng_pic {
  display: block;
  width: 100%;
  height: 220px;
  overflow: hidden;
  margin: 5px 0 5px 5px;
}
.left_share_quality_content {
  width: 100%;
  /* margin-bottom: 15%; */
}
.not_eng_item {
  /* text-align: center;
    float: left;
    width: 50%;
    height: 250px;
    background-color: #fff;
    margin-bottom: 10px; */
}
.its {
  float: left;
  background: #fff;
  width: 48%;
  /* margin-bottom: 6.3px; */
  margin: 1% 1% 1% 1%;
  height: 300px;
  overflow: hidden;
  text-align: center;
  border-radius: 12px;
}
</style>